<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.static {
            position: static;
            left: 50px; /*无效*/
            border: 3px solid #73AD21;
        }

        div.relative {
            position: relative;
            left: 30px;
            border: 3px solid #73AD21;
        }

        div.fixed {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 300px;
            border: 3px solid #73AD21;
        }

        div.relative2 {
            position: relative;
            width: 400px;
            height: 200px;
            border: 3px solid #73AD21;
        }

        div.absolute {
            position: absolute;
            top: 80px;
            right: 0;
            width: 200px;
            height: 100px;
            border: 3px solid #73AD21;
        }
        div.main {
            position: relative;
            width: 400px;
            height: 200px;
            border: 3px solid #73AD21;
        }
        button.icon {
            position: absolute;
            right: 15px;
            bottom: 15px;
        }
    </style>
</head>
<body>
<h1>position: static;</h1>
<p>An element with position: static; is not positioned in any special way; it is
    always positioned according to the normal flow of the page:</p>
<div class="static">
    This div element has position: static;
</div>
<hr>
<h1>position: relative;</h1>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
    This div element has position: relative;
</div>
<hr>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same
    place even if the page is scrolled:</p>
<div class="fixed">
    This div element has position: fixed;
</div>
<hr>
<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned
    relative to the viewport, like fixed):</p>
<div class="relative2">This div element has position: relative;
    <div class="absolute">This div element has position: absolute;</div>
</div>
<hr>

<div class="main">
    <p>在指定容器右下角，模拟一个添加按钮</p>
    <button class="icon">+</button>
</div>

</body>
</html>